<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<link rel="stylesheet" href="css/page-styles.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body>
		<div id="singlePile">
			<div id="top">
				<div class="dz-number">
					<div class="num">4</div>
					<span>#</span>
				</div>
				<div class="dz-msg">
					<div class="dz-type">交流桩·7kW</div>
					<ul>
						<li>实时电价：<span>1.2</span>元/度</li>
						
					</ul>
				</div>
				<div class="more-info">
					<ul class="date">
						<li id="date"></li>
						<li id="week"></li>
						<li id="now"></li>
					</ul>
					<div class="weather">

						<ul>
							<li>
								<span id="weather">晴</span>
							</li>
							<li><span id="city_temperature">20</span>℃</li>
						</ul>
						<div class="border">
							<ul class="Airquality">
								<li>PM2.5</li>
								<li><em id="pm25">60</em><em id="pm_level">优</em></li>
							</ul>
						</div>

					</div>

					<div class="logo"><img src="img/logo.png" /> </div>
				</div>
			</div>
			<div id="container">
				<div class="chargeA">
					
					<div class="picA">
						<div class="bigcircle">
							<div id="circle21" class="second circle second anim-flip show">
								<strong></strong>
								<img class="pic" src="img/circle1.png" />
								<img class="battery" src="img/batteryM1.png" />
								
							</div>
							<div id="circlehidden1" ></div>
						</div>

					</div>
					<div class="chargeingType">正在充电...</div>

					
				</div>
				<div class="chargeB">
					<ul>
						<li>已充时长<span>2</span><span class="text">小时</span>34<span class="text">分钟</span></li>
						<li>已充电量<span>123.45</span><span class="text">度</span></li>
						<li>实时电压<span>220</span><span class="text">V</span></li>
						<li>实时电流<span>32</span><span class="text">A</span></li>
					</ul>
				</div>
			</div>

		</div>

		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="js/circle-progress.js"></script>
		<script type="text/javascript">
			$('#circle21').circleProgress({
            value: 80/100,
            startAngle:-1.5,
            size:800,
           
            emptyFill: 'rgba(0, 0, 0, .3)',
        	}).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(parseInt(80 * progress) + '%');
        });
        
        $('#circlehidden1').circleProgress({
            value: 80/100,
            startAngle:-1.5,
            size:860,
            animationStartValue: 0,
          
           emptyFill: '#343738',
            fill: { color: 'rgba(255, 255, 255, .0)' }
        	}).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(parseInt(80 * progress) + '%');
        });
		</script>
		<script type="text/javascript" src="js/date.js"></script>
		<script type="text/javascript" src="js/singlePile.js"></script>
	</body>

</html>